<%-- 
    Document   : home
    Created on : 08-12-2014, 15:28:01
    Author     : Rodrigo
--%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<c:set var="contextPath" value="${pageContext.servletContext.contextPath}"/>

<!DOCTYPE html>
<html>
    <head>
        <title>Epraxis - Home</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minumum-scale=1, user-scalable=no">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="${contextPath}/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="${contextPath}/css/font-awesome.min.css">
        <link rel="stylesheet" href="${contextPath}/css/epraxis.css">
        <style type="text/css">
        </style>
    </head>
    <body class="body">
        <c:import url="/app/commons/Menu.view"/>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6 col-sm-offset-3">
                </div>
            </div>
            <div class="row margin-bottom-15">
                <div class="col-sm-10 col-sm-offset-1">
                    <span class="h3"><i class="fa fa-newspaper-o"></i> Noticias <small>Las últimas novedades de <i>Epraxis</i></small></span>
                    <hr>
                    <div class="row">
                        <div class="col-sm-3">
                            <ul class="media-list"> 
                                <li class="media">
                                    <div class="media-body">
                                        <h4 class="media-heading bold">
                                            <small>6/12/2014 15:36</small><br>
                                            Creación de cursos ¡ahora más fácil y rápido!
                                        </h4> 
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a diam ut mauris fermentum ultricies at sed augue. Nulla euismod consequat nisl, in lacinia lorem venenatis rutrum.
                                        <br>
                                        <a href="#">Leer más <i class="fa fa-angle-double-right"></i></a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="col-sm-3">
                            <ul class="media-list"> 
                                <li class="media">
                                    <div class="media-body">
                                        <h4 class="media-heading bold">
                                            <small>1/12/2014 18:40</small><br>
                                            Foro en construcción
                                        </h4> 
                                        Nam dictum ultricies mollis. Sed id volutpat felis, ac ultricies enim. Aenean eget porta orci. Cras quis auctor velit. In cursus magna venenatis fermentum feugiat. Vestibulum ullamcorper tincidunt arcu, sed tempor massa lobortis sit amet. In purus turpis, lacinia a tellus ac, eleifend maximus enim.
                                        <br>
                                        <a href="#">Leer más <i class="fa fa-angle-double-right"></i></a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="col-sm-3">
                            <ul class="media-list"> 
                                <li class="media">
                                    <div class="media-body">
                                        <h4 class="media-heading bold">
                                            <small>28/11/2014 09:21</small><br>
                                            Se buscan evaluadores
                                        </h4> 
                                        Mauris nunc lectus, iaculis ut tempor ac, tempor nec turpis. Fusce eu nulla velit. Nullam massa turpis, suscipit ac lectus ut, tincidunt posuere metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                                        <br>
                                        <a href="#">Leer más <i class="fa fa-angle-double-right"></i></a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="col-sm-3">
                            <ul class="media-list"> 
                                <li class="media">
                                    <div class="media-body">
                                        <h4 class="media-heading bold">
                                            <small>24/11/2014 12:58</small><br>
                                            ¡Nuevo diseño de la página!
                                        </h4> 
                                        Nunc ut ornare erat. Morbi vitae aliquet eros. Suspendisse at erat et leo dapibus viverra. Mauris vulputate, orci ut facilisis sollicitudin, odio sapien lobortis mi, sed ullamcorper leo felis quis eros. Pellentesque dapibus luctus justo a venenatis.                                     
                                        <br>
                                        <a href="#">Leer más <i class="fa fa-angle-double-right"></i></a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row margin-bottom-15">
                <div class="col-sm-10 col-sm-offset-1">
                    <span class="h3"><i class="fa fa-newspaper-o"></i> Cursos nuevos <small>Últimos cursos publicados</small></span>
                    <hr>
                    <div class="row">
                        <c:forEach var="curso" items="${listaUltimosCursosPublicados}">
                            <div class="col-sm-4 margin-bottom-20">
                                <ul class="media-list">
                                    <li class="media">
                                        <a class="media-left" href="#">
                                            <img src="${contextPath}/img/no-image.png" width="48" height="48" style="border: 2px solid white;">
                                        </a>
                                        <div class="media-body">
                                            <h4 class="media-heading">
                                                <small>${curso.categoria.nombre}</small><br>
                                                ${curso.nombre}
                                            </h4>
                                            ${curso.descripcion}
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </c:forEach> 
                    </div>
                </div>
            </div>
        </div>
        <br><br><br>
        <script type="text/javascript" src="${contextPath}/js/jquery-2.1.1.js"></script>
        <script type="text/javascript" src="${contextPath}/js/bootstrap.min.js"></script>
        <script type="text/javascript">

        </script>
    </body>
</html>